// pages/music-player/music-player.js
import { throttle } from "underscore"
import playerStore, { audioContext } from "../../../store/playerStore"

const app = getApp() 

const modeNames = ["order","repeat","random"]

Page({
  data: {
    stateKeys:["id","currentSong","currentTime","durationTime",
        "lyricInfos","currentLyricText","currentLyricIndex","isPlaying",
        "currentModeIndex"],

    id: 0,
    currentSong:{},
    lyricInfos:[],
    currentLyricText:"",
    currentLyricIndex:0,
    lyricScrollTop:0,

    statusBarHeight: 20,
    currentPage:0,
    contentHeight:400,
    navTitles:["歌曲","歌词"],

    currentTime:0,
    durationTime:0,
    sliderValue:0,
    isPlaying:true,
    isSliderChanging:false,

    playSongList:[],
    playSongIndex:0,
    isFristPlay: true,
    currentModeIndex:0,
    playmodeName:"order"
  },
  onLoad(options) {
    // 0.获取设备信息
    this.setData({ 
        statusBarHeight: app.globalData.statusBarHeight,
        contentHeight: app.globalData.windowHeight 
    })
    
    // 更新播放歌曲进度
    this.updateProress()

    let id = options?.id
    playerStore.dispatch("playMusicWithSongIdAction",id)
    // 获取store共享数据
    playerStore.onStates(["playSongList","playSongIndex"],this.getPlaySongInfosHeadle)
    playerStore.onStates(this.data.stateKeys,this.getPlayerSongInfosHeadle)
  },
  updateProress:throttle(function(currentTime) {
    if (this.data.isSliderChanging) return
    // 1.获取当前播放时间 // 2.计算滑块位置
    const sliderValue = (currentTime / this.data.durationTime) * 100
    this.setData({ currentTime, sliderValue })
  },500,{leading:false,trailing:false,}),

  // 事件监听    ================================== 
  onSwiperChange(event) {
      this.setData({ currentPage:event.detail.current })
  },
  onTagItemTap(event) {
      const index = event.currentTarget.dataset.index
      this.setData({ currentPage:index })
  },
  onSliderChange(event) {
    // 1.获取点击滑块位置对应的值
    const value = event.detail.value

    // 2.计算出要播放的位置时间
    const currentTime = value / 100 * this.data.durationTime
    
    // 3.设置播放器，播放计算出的时间
    audioContext.seek(currentTime/1000)
    this.setData({ currentTime,isSliderChanging:false, sliderValue :value,isPlaying:true })
  },
  onSliderChanging: throttle(function(event) {
    // 1.获取滑动到的位置的value
    const value = event.detail.value
    // 2.根据当前的值, 计算出对应的时间
    const currentTime = value / 100 * this.data.durationTime
    this.setData({ currentTime })

    // 3.当前正在滑动
    this.data.isSliderChanging = true
    this.setData({ isPlaying: true })
  }, 100),
  onPlayOrPauseTap() {
    playerStore.dispatch("playMusicStateAction")
  },
  onPrevBtnTap() {
    playerStore.dispatch("playChangeNewSongAction",false)
  },
  onNextBtnTap() {
    playerStore.dispatch("playChangeNewSongAction")
  },
  onChangeModeTap() {
    playerStore.dispatch("playChangeModeAction")
  },
  onleftClick() {   
      wx.navigateBack()
  },
  // ========== 获取store ==============
  getPlaySongInfosHeadle({ playSongList,playSongIndex }) {
    if (playSongList) {
        this.setData({ playSongList })
    }
    if (playSongIndex !== undefined) {
        this.setData({ playSongIndex })
    }
  },
  getPlayerSongInfosHeadle({id,currentSong,currentTime,durationTime,
  lyricInfos,currentLyricText,currentLyricIndex,isPlaying,currentModeIndex,
  sliderValue}) {
    if (id !== undefined) {
        this.setData({ id })
    }
    if (currentSong) {
        this.setData({ currentSong })
    }
    if (currentTime !== undefined) {
        // this.setData({ currentTime })
        this.updateProress(currentTime)
    }
    if (durationTime !== undefined) {
        this.setData({ durationTime })
    }
    if (lyricInfos) {
        this.setData({ lyricInfos })
    }
    if (currentLyricText) {
        this.setData({ currentLyricText })
    }
    if (currentLyricIndex !== undefined) {
        this.setData({ currentLyricIndex,lyricScrollTop: currentLyricIndex * 35})
    }
    if (isPlaying !== undefined) {
        this.setData({ isPlaying })
    }
    if (currentModeIndex !== undefined) {
        this.setData({ playmodeName: modeNames[currentModeIndex] })
    }
    if (sliderValue !== undefined) {
        this.setData({ sliderValue })
    }
  },

  onUnload() {
    playerStore.onStates(this.data.stateKeys,this.getPlaySongInfosHeadle)

    playerStore.offStates(["playSongList","playSongIndex"],this.getPlaySongInfosHeadle)
  }
})